技術筆記

連兩天基礎語法的知識後，今天來看比較生硬的理論，搭配著學習，才不會太過無趣。

執行環境(Execution Context)

• 程式語言
  • 編譯語言：在程式一寫完會預先編譯，之後能夠編譯完成的程式碼獨立執行
  • 直譯語言：程式寫完後先存放著，等要執行時再透過直譯器邊解讀邊執行，所以無法獨立執行，需透過一個執行環境進行編譯並產生結果。Javascript屬直譯語言。
• 執行環境:如上所述，JavaScript為直譯語言，需要透過環境才能被執行，在瀏覽器中提供該環境的就是JavaScript引擎，其主要目的即把原始碼的關鍵字解析成為特定結構的片段，交給直譯器後編譯並執行，最知名的就是Chrome的V8引擎，被創造出來的環境也稱作執行環境。
  • 全域執行環境（Global Execution Context）：當檔案被載入時，就會進入全域執行環境，只要不在任何函式裡的程式碼就是在全域執行環境內。
    • 執行事件
      • 創建環境
      • 創建this變數，並將其指向全域
      • 進行記憶體指派流程
  • 函式執行環境（Functional Execution Context）：當函式被呼叫，就會創建一個全新的執行環境，每個函式有自己的執行環境，只有被呼叫時才會產生，同時可存在多個
• 執行環境堆疊：為“後進先出”的堆疊結構，就像罐裝洋芋片，最後被放進去的會在最上層，當你吃的時候也是從最上層開始吃。

作用域(Scope)

• 語彙環境(Lexical Environment)：一言以蔽之，你把程式碼寫在哪？
• 作用域:變數可以被使用的範圍
  • 函式範疇(Function Scope)：函式沒有被呼叫前，無法產生執行環境，所以全域無法使用函式內變數，var屬函式範疇

  function greeting(){
  var hello = "hello"
  }
  console.log(hello)//hello is not defined
  
  //hello只在函式被呼叫時才能使用
  

  • 區塊範疇(Block Scope)：區塊指的是{}大括號內的範圍，ES6後出現const跟let，屬於區塊範疇

  let isPeople= true
  function greeting(){
  if (isPeople){
  var firstname = "Stella"
  let surname = "Ko"
  const fullname = "Stella Ko"
  }
  console.log(firstname)//"Stella"
  console.log(surname)//surname is not defined 
  console.log(fullname)//fullname is not defined
  }
  
  //因let跟const屬區塊範疇，所以在大括號外，無法取得
  //var屬函式範疇故可取得
  
  greeting()
  
  console.log(firstname)//firstname is not defined
  console.log(surname)//surname is not defined 
  console.log(fullname)//fullname is not defined
  
  //函式外連var也無法取得
  

作用域鍊(Scope Chain)

JavaScript預設行為：函式在範疇內找不到變數時，會向外部環境尋找，語彙環境決定該往哪去尋找。
當執行環境往外部環境尋找仍無所獲時，就會不斷往更外層的語彙環境尋找，直到找到變數或找到全域環境為止，這一連串的查找過程就是作用域鍊。

執行環境決定程式碼被執行的順序，語彙環境決定JavaScript在不同範疇間查找變數的方式跟順序

心得

常常讀這種生硬又充滿一堆專有名詞的理論都會讀到出神，總是需要來回讀個三四次，才覺得有輸入一點，但不要求自己背起來，就當故事讀，不然腦袋會爆炸，來日方長，多碰幾次，總是會跟他成為好朋友的。

參考資料

• 書 JavaScript概念三明治：基礎觀念、語法原理一次帶走！（第三章）

童言童語

努力看完天書後，來點輕鬆的吧！分享我兒子的童言童語，調劑身心一下

5歲樂咖+2歲嗨啾 = 我的神奇寶貝 皮咖啾

2023/03/13
我正在剪指甲⋯
咖：媽媽，我什麼時候可以練習自己剪指甲？
我：現在就可以啊！
咖：不要
我：為什麼？
咖：我怕剪到手
我：多練習就不會啊！我們也會在旁邊幫你看啊！
他想了想⋯
咖：媽媽，你可以留幾隻不要剪，讓我幫你剪嗎？
（大驚）